<template>
	<view>
		<!-- 头部导航栏 -->
		<view style="
			border-bottom: solid 1rpx #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 20rpx;
			position:fixed;
			top:0;left:0;right:0;
			height: 60px;
			z-index: 22;
			background-color: white;
		">
			<view style="display: flex;position: absolute;z-index: 22;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
			
			<view style="position: absolute;left:0;right:0;display: flex;flex-direction: column;;align-items: center;justify-content: center;">
				<view style="font-weight: bold;">beckham996的测试公众号</view>
				<view>群发消息记录</view>
			</view>
			
<!-- 			<view style="display: flex;align-items: center;;padding: 20rpx 25rpx;margin-right: 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<u-icon name="setting"></u-icon>
				<view style="margin-left: 10rpx;">
					设置
				</view>
			</view> -->
		</view>
		
		<view style="padding-top: 60px;"></view>
		
		<view style="margin: 10rpx;padding: 1rpx;">
			<template v-for="(history,index) in news_histories">
				<view style="border-radius: 5px;overflow: hidden;margin: 20rpx 0 70rpx 0;box-shadow: 0 0 19px 1px #00000035;">
					<view style="margin: 0 20rpx;">
						<view style="display:flex;align-items: center;justify-content:space-between;margin: 20rpx 5rpx 10rpx 5rpx;font-size: 13px;">
							
							<view style="display: flex;">
								<view style="color: #888;">{{'发表时间:' + $dayjs(history.created_at).format('MM-DD HH:mm') }}</view>
								<view style="color: #888;padding-left: 10rpx;">{{`(${$dayjs(history.created_at).fromNow()})`}}</view>
								<!-- <view style="color: #888;margin-left: 20rpx;">{{'桔赞'}}</view> -->
							</view>
							<view @click="send(history)" style="display: flex;align-items: center;padding: 10rpx 25rpx;margin: 0 0rpx;border-radius: 10rpx;border: solid 1rpx #ddd;">
								<u-icon 
									:name="history.msg_ok?'checkmark-circle-fill':'info-circle-fill'" 
									:color="history.msg_ok?'#00c110':'#eedf00'"></u-icon>
								<view style="margin-left: 10rpx;">
									{{history.msg_ok ? '群发成功' : '群发失败'}}
								</view>
							</view>
						</view>
<!-- 						<view style="display:flex;align-items: flex-end;justify-content:space-between;margin: 10rpx 5rpx 20rpx 5rpx;font-size: 13px;">
							<view style="color: #888;">{{'创建日期:' + $dayjs(history.created_at).format('YYYY-MM-DD HH:mm')}}</view>
							<view style="color: #888;">{{'次数:' + 5}}</view>
						</view> -->
					</view>
						
					<view @click="onPost(history.news.posts[0])" style="height: 150px;overflow: hidden;display: flex;align-items: center;position: relative;">
						<image style="width: 100%;" mode="widthFix" :src="absUrl(history.news.posts[0].thumb_url)"></image>
						
						<view style="display: flex;align-items: center;;position: absolute;left: 0;right: 0;top: 60%;bottom: 0;background-image: linear-gradient(0deg,#212121cc,#00000000);padding: 14rpx;overflow: hidden;">
							<view style="color: white;font-weight: bold;font-size: 16px">
								{{history.news.posts[0].title}}
							</view>
						</view>
					</view>
					
					<template v-if="history.news.posts.length > 0" >
						<template v-for="(post,i) in history.news.posts">
							<view v-if="i> 0" @click="onPost(post)" style="display: flex;padding: 20rpx 20rpx;border-bottom: solid 1rpx #eee;">
								<view style="flex: 1;">
									<view style="font-weight: bold;font-size: 15px;padding-bottom: 10px;">{{post.title}}</view>
									<!-- <view style="color: #888;">{{post.digest}}</view> -->
								</view>
								<view style="overflow: hidden;">
									<image style="width: 60px;height: 60px;" mode="aspectFill" :src="absUrl(post.thumb_url)"></image>
								</view>
							</view>
						</template>
					</template>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad(options){
			let res = await this.$http.get(`/common/wx/news_history?office_id=${options.office_id}`)
			this.news_histories = res.data
		},
		data() {
			return {
				news_histories:[]
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			onPost(post){
				// uni.navigateTo({
				// 	url: '/pages/job/publish/job-offices/web-preview/web-preview'
				// })
				uni.navigateTo({
					url: `/pages/job/publish/job-offices/post-preview?id=${post.id}`
				})
			}
		}
	}
</script>

<style>

</style>
